﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
    <style>
        body {
            background: #ebebeb
        }

        #maincontainer {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            flex-direction: row;
        }

        .rowcontainer {
            width: 100%;
            height: 320px;
            display: flex;
            flex-direction: row;
        }

        .columncontainer {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 50%;
            padding: 30px;
        }

        .cellheadcontainer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row;
            height: 60px;
            background-color: #6B84A2
        }

        .celltitletext {
            color: white;
            font-size: 18px;
            font-weight: bold;
            margin-left: 10px;
        }

        .celltitleop {
            padding-right: 20px;
        }

        .cellcontentcontainer {
            height: 260px;
            background-color: white;
        }

        .morebtn {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="maincontainer">
            <div class="rowcontainer" v-for="rowindex in groupCount">
                <div class="columncontainer" v-for="columnindex in rowElementCount"
                    :id="gernerateId(rowindex,columnindex)">

                </div>
            </div>
        </div>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js") @Scripts.Render("~/Resource/plugin/mustache/3.1.0/mustache.min.js")
<script>
    var elementUrl = GetRootPath() + "Frame/Element/FindAllEnableList"
    var pageData = {
        ElementList: [],
        groupCount: 0,
        rowElementCount: 2
    };
    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            this.LoadElement();
        },
        methods: {
            LoadElement: function () {
                var page = this;
                var data = {

                }
                JsonAjaxPost(elementUrl, JSON.stringify(data), function (data, status) {
                    pageData.ElementList = data.ElementList;
                    var rowelementcount = pageData.rowElementCount
                    var groupcount = pageData.ElementList.length % rowelementcount == 0 ? pageData
                        .ElementList
                        .length / rowelementcount : (parseInt(pageData.ElementList.length /
                            rowelementcount)) +
                        1;
                    pageData.groupCount = groupcount;
                    page.$nextTick(function () {
                        for (var i = 0; i < groupcount; i++) {
                            for (var j = 0; j < rowelementcount && i * groupcount + j <
                                pageData
                                .ElementList.length; j++) {
                                var index = i * rowelementcount + j
                                var element = pageData.ElementList[index];
                                var id = "row_" + (i + 1) + "column_" + (j + 1);
                                pageData.ElementList[index]["ElementID"] = id;
                                var renderdata = {
                                    elementtitle: element.ElementTitle,
                                    elementmoreurl: element.ElementMoreUrl,
                                    elementid: id
                                }
                                //刷新事件存储
                                pageData.ElementList[index]["RefreshEvent"] = function () {
                                    //请求数据
                                    JsonAjaxPost(element.ElementDataUrl, JSON
                                    .stringify({}),
                                        function (elementdata, status) {
                                            if (elementdata.code == 0) {
                                                //合并json
                                                for (var attr in elementdata) {
                                                    renderdata[attr] = elementdata[
                                                        attr];
                                                }
                                                var htmlcontent = Mustache.render(
                                                    element
                                                    .TemplatContent,
                                                    renderdata);

                                                $("#" + id).html(htmlcontent);

                                            }
                                        })

                                }
                                //请求数据
                                JsonAjaxPost(element.ElementDataUrl, JSON.stringify({}),
                                    function (elementdata, status) {
                                        if (elementdata.code == 0) {
                                            //合并json
                                            for (var attr in elementdata) {
                                                renderdata[attr] = elementdata[attr];
                                            }
                                            var htmlcontent = Mustache.render(element
                                                .TemplatContent,
                                                renderdata);

                                            $("#" + id).html(htmlcontent);

                                        }
                                    })

                            }
                        }
                    })

                })
            },
            gernerateId: function (rowindex, columnindex) {
                return "row_" + rowindex + "column_" + columnindex;
            },
        }
    })
    function CommonRefresh(id){
        pageData.ElementList.forEach(element => {
            if(element.ElementID==id){
                element.RefreshEvent();
            }
        });
    }
</script>

</html>